<template>
  <view>
    <view class="title">账号管理</view>
    <view class="title2">管理您的账号信息</view>

    <!-- 账号信息 -->
    <view class="info">
      <view class="label">账号：</view>
      <view class="value">{{ account.username }}</view>
    </view>
    <view class="info">
      <view class="label">手机号：</view>
      <view class="value">{{ account.phone }}</view>
    </view>
    <view class="info">
      <view class="label">邮箱：</view>
      <view class="value">{{ account.email }}</view>
    </view>

    <!-- 修改密码按钮 -->
    <button @click="navigateToChangePassword">修改密码</button>

    <!-- 注销账号按钮 -->
    <button class="logout-button" @click="showLogoutConfirm">注销账号</button>

    <ErrorMessage
      v-if="isErrorVisible"
      :message="message"
      :visible="isErrorVisible"
      :type="errorType"
      @update:visible="isErrorVisible = false"
    />
  </view>
</template>

<script>
import { api } from '@/utils/api/user.js';
import ErrorMessage from '@/components/errorMessage/errorMessage.vue';

export default {
  components: {
    ErrorMessage,
  },
  data() {
    return {
      account: {
        username: '',
        phone: '',
        email: '',
      },
      message: '',
      isErrorVisible: false,
      errorType: 'error',
    };
  },
  onShow() {
    this.loadUserInfo();
  },
  methods: {
    showError(message, type = 'error') {
      this.message = message;
      this.errorType = type;
      this.isErrorVisible = true;
    },
    async loadUserInfo() {
      const userInfo = wx.getStorageSync('userInfo');
      if (userInfo) {
        this.account = {
          username: userInfo.username,
          phone: userInfo.phone,
          email: userInfo.email
        };
      } else {
        wx.redirectTo({ url: '/pages/login/login' });
      }
    },
    navigateToChangePassword() {
      uni.navigateTo({ url: '/pages/ChangePassword/ChangePassword' });
    },
    showLogoutConfirm() {
      uni.showModal({
        title: '确认注销',
        content: '您确定要注销账号吗？',
        success: (res) => {
          if (res.confirm) {
            this.logoutAccount();
          }
        },
      });
    },
    logoutAccount() {
      wx.removeStorageSync('userInfo');
      wx.reLaunch({ url: '/pages/login/login' });
    },
  },
};
</script>

<style>
  page {
    background-color: #FFF;
  }
  .title {
    margin: 110rpx 0 20rpx 50rpx;
    font-size: 64rpx;
    font-weight: 400;
    letter-spacing: 0rpx;
    line-height: 76rpx;
    color: rgba(51, 62, 99, 1);
    text-align: left;
    vertical-align: top;
  }
  .title2 {
    margin: 0rpx 0 120rpx 50rpx;
    font-size: 32rpx;
    font-weight: 400;
    letter-spacing: 0.64rpx;
    line-height: 54rpx;
    color: rgba(147, 147, 147, 1);
    text-align: left;
    vertical-align: top;
  }
  .info {
    display: flex;
    margin: 0rpx 0 35rpx 80rpx;
    /* padding: 40rpx 0 12rpx 62rpx; */
    width: 80%;
    height: 80rpx;
    /* background: rgba(247, 248, 249, 1); */
    /* border-radius: 40rpx; */
  }
  .label {
    font-size: 32rpx;
    font-weight: 400;
    letter-spacing: 0.4rpx;
    line-height: 56rpx;
    text-align: left;
    vertical-align: middle;
  }
  .value {
    font-size: 32rpx;
    font-weight: 400;
    letter-spacing: 0.4rpx;
    line-height: 56rpx;
    color: rgba(51, 62, 99, 1);
    text-align: left;
    vertical-align: middle;
  }
  button {
    margin-top: 30rpx;
    margin-bottom: 30rpx;
    width: 300rpx;
    height: 100rpx;
    background: rgba(36, 204, 184, 1);
    font-size: 32rpx;
    font-weight: 400;
    letter-spacing: 0.4rpx;
    line-height: 100rpx;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    vertical-align: middle;
    border-radius: 40rpx;
  }
  .logout-button {
    background: rgba(255, 77, 77, 1);
    color: rgba(255, 255, 255, 1);
  }
</style>